<template>
	<view>
		<z-button z-class="custom-btn" @click="drawerHandler('left')">左边弹出</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler('right')">右边弹出</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler2('top')">上边弹出</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler2('bottom')">下边弹出</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler('left', true)">左边弹出（全屏）</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler('right', true)">右边弹出（全屏）</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler2('top', true)">上边弹出（全屏）</z-button>
		<z-button z-class="custom-btn" @click="drawerHandler2('bottom', true)">下边弹出（全屏）</z-button>
		<drawer z-class="custom-drawer" v-model="option" top="44px">
			<view class="content">
				<view>抽屉内容</view>
				<z-button z-class="custom-btn2" @click="option.show = false">关闭</z-button>
			</view>
		</drawer>
		<drawer z-class="custom-drawer" v-model="option2" top="44px">
			<view class="content">
				<view>抽屉内容</view>
				<z-button z-class="custom-btn2" @click="option2.show = false">关闭</z-button>
				<text class="text">
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				-
				</text>
			</view>
		</drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option:{
					show:false,
					direction:'left',
					fullScreen:false
				},
				option2:{
					show:false,
					direction:'top',
					fullScreen:false
				}
			}
		},
		methods: {
			drawerHandler(direction, fullScreen=false){
				this.option = {
					show: true,
					direction,
					fullScreen
				}
			},
			drawerHandler2(direction, fullScreen=false){
				this.option2 = {
					show: true,
					direction,
					fullScreen
				}
			}
		}
	}
</script>

<style lang="scss">
.custom-btn{
	margin: 30upx;
}
.custom-drawer{
	padding-top: 44px;
	background:red;
}
.content{
	padding: 60upx;
	box-sizing: border-box;
	text-align: center;
	.text{
		display: block;
	}
}
.custom-btn2{
	display: inline-block;
	margin: 40upx auto 0;
	padding: 0 100upx;
}
</style>
